<template>
  <div class="container">
    <div style="height: 5%;">
    <div class="sub">
      <div >
        <img
            alt="OP.GG logo (Jarvan IV, Cataclysm)"
            loading="eager"
            width="56" height="46"
            decoding="async"
            data-nimg="1"
            class="object-contain md:h-[46px] md:w-auto md:flex-grow-0"
            style="color:transparent"
            src="https://meta-static.op.gg/logo/image/d070ca7b3aab8527323ca582bcc5edd4.png?image=q_auto:good,f_webp,w_auto,h_92&amp;v=1751361169">
      </div>
      <div class="search">
        <div class="header">
          <select
              v-model="playerData.region"
              class="borderless-select select text">
            <option label="Brazil" value="br1" />
            <option label="LAS" value="la1" />
            <option label="LAN" value="la2" />
            <option label="North America" value="na1" />
            <option label="Europe Nordic & East" value="eun1" />
            <option label="Europe West" value="euw1" />
            <option label="Türkiye" value="tr1" />
            <option label="Russia" value="ru" />
            <option label="Japan" value="jp1" />
            <option label="Korea" value="kr" />
            <option label="Southeast Asia" value="sg2" />
            <option label="Taiwan" value="tw2" />
            <option label="Vietnam" value="vn2" />
            <option label="Middle East" value="me1" />
          </select>
        </div>

        <div style="width: 100%; height: 100%;">
          <input
              v-model="playerData.name"
              placeholder="玩家名称 + #NA1"
              class="borderless-select margin-text"
              @keyup.enter="handleSearch"
          />
        </div>
        <div style="width: 12%; height: 100%; ">
          <button
              class="button"
              @click="handleSearch"
              :loading="loading"
          >
            <span class="button-text">.GG</span>
          </button>
        </div>

      </div>
    </div>
    </div>

    <div style="height: 4.5%; ">
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="rgb(83,131,232)"
        text-color="#fff"
        active-text-color="rgb(255,255,255)"
    >
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">英雄</el-menu-item>
      <el-menu-item index="3" >热榜</el-menu-item>
      <el-menu-item index="4">游戏模式</el-menu-item>
        <el-menu-item index="5">数据统计</el-menu-item>
    </el-menu>
    </div>
    <div class="player">
      <div class="playerBase">
          <el-col :span="13">
            <div class="title-avatar-container">
              <div class="demo-basic--circle">
                <div>
                  <el-avatar shape="square" :size="100" :src="`https://ddragon.leagueoflegends.com/cdn/15.13.1/img/profileicon/${playerbaseData.profileIconId}.png`" />
                </div>
              </div>

              <div class="sub-title">
                <div >
                {{playerbaseData.gameName}}#{{playerbaseData.tagLine}}
                </div>
                <div >
                  Level: {{playerbaseData.summonerLevel}}
                </div>
              </div>


            </div>


          </el-col>
      </div>
      <div style="width: 40%; height: 90%; white-space: pre-wrap; ">
        <el-button
            type="primary"
            @click="toggleReport"
            style=" width: 100%; background-color: rgb(25,60,184)"
        >
          一键获取ai报告
        </el-button>

        <div v-if="loading" class="loading-overlay">
          <div class="loading-spinner">
            <div class="spinner"></div>
            <div class="loading-text">分析中...</div>
          </div>
        </div>

        <el-scrollbar v-show="showReport" height="100%">
          <div class="markdown-content">
            <template v-for="(word, index) in report" :key="index" class="scrollbar-demo-item">
              <template v-if="word.trim() !== ''">
                <h1 v-if="word.startsWith('# ')" style="color: rgb(180, 160, 255);">{{ word.substring(2) }}</h1>
                <h2 v-else-if="word.startsWith('## ')" style="color: rgb(100, 200, 255);">{{ word.substring(3) }}</h2>
                <h3 v-else-if="word.startsWith('### ')" style="color: rgb(100, 220, 180);">{{ word.substring(4) }}</h3>
                <ul v-else-if="word.startsWith('- ')" style="color: rgb(180, 160, 255);">
                  <li>{{ word.substring(2) }}</li>
                </ul>
                <ol v-else-if="/^\d+\./.test(word)" style="color: rgb(180, 160, 255);">
                  <li>{{ word.replace(/^\d+\.\s*/, '') }}</li>
                </ol>
                <p v-else style="color: #d0d0d0;">{{ word }}</p>
              </template>
            </template>
          </div>
        </el-scrollbar>
      </div>
    </div>


    <div class="playerChose no-bottom-border">
      <div class="mb-4 chosebutton">
        <el-button    @click="router.push({path: 'default'})"text class="custom-button" >概要</el-button>
        <el-button    @click="router.push({path: 'champions'})"text class="custom-button">英雄</el-button>
        <el-button    @click="router.push({path: 'mastery'})"text class="custom-button">高光时刻</el-button>
        <el-button    @click="router.push({path: 'highlight'})"text class="custom-button">熟练度</el-button>
      </div>
    </div>


        <RouterView  class="group" style="z-index: 100"/>

<!--   容器底部 -->
  </div>

</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import router from "@/router/index.js"
import { useRoute } from 'vue-router'
import request from "@/utils/request.js";
const route = useRoute()
const playerbaseData = reactive({
  puuid: route.query.puuid,
  serverRegion: route.query.serverRegion, //区服
  gameName: route.query.name,//id
  tagLine: route.query.tag,//后缀
  profileIconId: route.query.profileIconId,//头像（图片编号）
  summonerLevel: route.query.summonerLevel,//等级
})

const report = ref<string[]>([]);
const loading = ref(false);
const error = ref<string | null>(null);

router.push({
  path: 'summoners/default',
  query: {
    puuid: playerbaseData.puuid,
    serverRegion: playerbaseData.serverRegion,
    gameName: playerbaseData.gameName,
    tagLine: playerbaseData.tagLine
  }
})

const state = reactive({
  circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',

})

const showReport = ref(false);

const toggleReport = () => {
  getReport();
};

const getReport = async () => {
  try{
    showReport.value = false;
    loading.value = true;
    error.value = null;
    const response = await request.get(
        `ai/analyze/${playerbaseData.serverRegion}/${playerbaseData.puuid}`
    );

    if (!response.data || !Array.isArray(response.data)) {
      throw new Error("无效的响应数据");
    }

    report.value = response.data;//使用report来获取
    alert(report.value)
    showReport.value = true;
  } catch (err : any) {
    console.error("加载数据失败:", err);
    error.value = `加载数据失败: ${err.message || '未知错误'}`;
  } finally {
    loading.value = false;
  }
}


const playerData = reactive({
  region: '',
  name: '', // 默认填充测试数据
})


</script>

<style scoped>

.container {
  width: 100vw;
  height: 100vh;
  position: relative;

}
.sub {
  background-color: rgb(83,131,232);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}
.search {
  background-color: rgb(255,255,255);
  width: 36%;
  height: 70%;
  display: flex;
  flex-direction: row;
  margin-top: 0.5%;
  margin-right: 14%;
  border-radius: 10px;
}
.header{
  width: 9%;
  height: 100%;
  background-color: rgb(236,242,255);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.borderless-select {
  width: 100%;
  height: 100%;
  border: none !important;
  outline: none !important;
  background: none;
  color: rgb(83,131,232);
  border-radius: 10px;
}
.margin-text{
  margin-left: 5%;
  font-size: 12px;
}
.button{
  width: 20%;
  height: 100%;
  border: none;
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
  color: rgb(83,131,232);
  background: none;
}
.button-text {
  font-family: 'Arial', sans-serif; /* 可替换为其他字体 */
  font-size: 24px; /* 字体大小 */
  font-weight: 800; /* 字体粗细 (100-900) */
  letter-spacing: 1px; /* 字符间距 */
  text-transform: uppercase; /* 转为大写 */
}
.text{
  /* 字体样式 */
  font-family: 'Arial', sans-serif; /* 可替换为其他字体 */
  font-size: 13px; /* 字体大小 */
  font-weight: 400; /* 字体粗细 (100-900) */
  letter-spacing: 1px; /* 字符间距 */
}

.el-menu-demo{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.player {
  background-color: rgb(49,49,60);
  border-radius: 3px;
  width: 100vw;
  height:220px;
  display: flex;          /* 启用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-content: center;    /* 垂直居中 */
  position: relative;
  flex-direction: row;
  margin-top: 0px;
  position: relative;
}
.playerBase {
  text-align: left;
  border-radius: 3px;
  width: 30%;
  height:100%;
  display: flex;          /* 启用 Flexbox 布局 */
  justify-content: center;
  align-content: center;    /* 垂直居中 */
}
.playerChose{
  width: 100%;
  height: 50px;
  background-color:rgb(49,49,60);
  margin: 1px;
  justify-content: center;
  align-content: center;
  border-radius: 10px;

}
.group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  height: 100vh;
  margin-top: 0px;
}

.bottom-submenu {
  display: flex;                /* 启用Flex布局 */
  flex-direction: row;          /* 横向排列（默认值，可省略） */
  align-items: center;          /* 垂直居中 */
  gap: 20px;                    /* 菜单项间距 */
  padding: 0 20px;              /* 左右内边距 */
}
.bottom-submenu > .el-menu-item,
.bottom-submenu > .el-sub-menu {
  height: auto !important;      /* 覆盖默认高度 */
  line-height: normal !important;
  padding: 8px 12px !important; /* 调整内边距 */
  margin: 0 !important;         /* 移除默认外边距 */
  color: white !important;      /* 文字颜色 */
}
.bottom-submenu > .el-menu-item:hover,
.bottom-submenu > .el-sub-menu:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.bottom-submenu .el-sub-menu__title {
  padding: 0 !important;
}
.search-item {
  top: 10px;
  padding: 15px 0;
  display: flex;
  justify-content: center;
}
.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: center;
  align-content: center;
}
.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
  flex: 1;
}
.title-avatar-container {
  display: flex;
  justify-content: center;
  align-content: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  margin-top: 10%;
}
.sub-title {
  margin-top: -1vh;
  font-size: 20px;
  color: azure;
  flex-direction: row;
  height: 10vh;
  white-space: nowrap;
  order: 2;
}
.demo-basic .demo-basic--circle {
  order: 1;            /* 确保在左侧 */
  flex: 0 0 auto;      /* 防止头像区域被拉伸 */
}
.custom-button {
  color: white !important; /* 文字颜色设为白色 */
}

.custom-button:hover {
  background-color: rgba(128, 128, 128, 0.2) !important; /* 半透明灰色背景 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
}
.chosebutton {
  display: flex;
  gap: 12px; /* 按钮之间的间距 */
  margin-left: 20vw;
}
.no-bottom-border.el-menu--horizontal {
  border-bottom: none !important;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 100px;
  margin: 0;
  text-align: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.loading-overlay {
  position: absolute;
  top: 40px; /* 在按钮下方 */
  left: 800px;
  right: 240px;
  bottom: 0;
  background-color: rgba(49, 49, 60, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  border-radius: 8px;
}
.loading-spinner {
  text-align: center;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(83, 131, 232, 0.3);
  border-top: 4px solid rgb(83, 131, 232);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 10px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

</style>